<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Growfield</title>
        <link rel="stylesheet" href="test.css" type="text/css">
        <!--[if IE 6]>
        <style>
            .menu {
                position: absolute;
            }
        </style>
        <![endif]-->
        <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'></script>
        <script type="text/javascript" src='jquery.easing.js'></script>
        <script type="text/javascript" src='jquery.mousewheel.js'></script>
        <script type="text/javascript" src='@DESTFILE@'></script>
        <script type="text/javascript" src='test.js'></script>
        <script type="text/javascript" src='menu.js'></script>
    </head>
    <body>
<div class=menu>
    <ul class=tabs>
        <li tab="growfield" class="selected">Growfield</li>
    </ul>
    <div id="growfield" class=options></div>
</div>

<div class=content>
    <h1>jquery.growfield - automatically growing textareas. Demo.</h1>
    <p>
        Use the left menu to learn about the most often used options. The <b>full</b> list of options you can find <a href="growfield.xml">here.</a><br>
        <a href="http://code.google.com/p/jquery-growfield/downloads/list">Here</a> you can download the code.
    </p>

    <ul class=tabs>
        <li tab="simple">Basic</li>
        <li tab="styles">Styles</li>
        <li tab="wtext">With text</li>
    </ul>

    <div id=simple class=examples>
        <div class=column>
            Simple textarea,
            <textarea></textarea>
             no attributes, no inline styles, no classes, no inheritance
        </div>
        <div class=column>
            No styles,
            <textarea rows=10></textarea>
            but rows attribute is set
        </div>
        <div class=column>
            Inline styles:
            <textarea style="height:40px; width:250px; font-size:20px;"></textarea>
            height, width, font-size
        </div>
    </div>

    <div id=styles class=examples>
        <div class=column style="width:220px;">
            Inline styles:
            <textarea style="padding:10px; font-size:40px; line-height:40px; font-family: Arial; height:40px; width:150px; border:1px solid #ccc;"></textarea>
            <br>width, height, padding, font-size, line-height, font-family, border
        </div>
        <div class="column inh" style="width:220px;">
            Inherited styles:
            <textarea></textarea>
            <br>width, height, padding, font-size, line-height, font-family, border
        </div>
        <div class="column" style="width:220px;">
            Inline styles:
            <textarea style="height:50px; font-size:20px; min-height: 30px; max-height:200px;"></textarea>
            <br>min-height, max-height, height, font-size
        </div>
    </div>

    <div id=wtext class=examples>
        <div class=column style="width:220px;">
            Inline styles:
            <textarea style="padding:10px; font-size:20px; line-height:20px; font-family: Arial; height:40px; width:150px; border:1px solid #ccc;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis eleifend eros. Nulla sollicitudin. Cras interdum. Nam elit. Donec id nisl. Quisque luctus viverra neque. Quisque ligula ante, ornare at, ultrices sit amet, luctus eu, orci. Phasellus tristique tincidunt arcu. Mauris porttitor nunc ac ligula. Morbi rhoncus dolor sit amet urna. Praesent dapibus tellus in sem. Phasellus elementum placerat orci. Nullam leo. Pellentesque vestibulum. Pellentesque eget nunc eget nulla luctus facilisis.
            Curabitur elit.</textarea>
            <br>width, height, padding, font-size, line-height, font-family, border
        </div>
        <div class="column inh" style="width:220px;">
            Inherited styles:
            <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
            <br>width, height, padding, font-size, line-height, font-family, border
        </div>
        <div class="column" style="width:220px;">
            Inline styles:
            <textarea style="height:50px; font-size:20px; min-height: 30px; max-height:200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis eleifend eros. Nulla sollicitudin. Cras interdum. Nam elit. Donec id nisl. Quisque luctus viverra neque. Quisque ligula ante, ornare at, ultrices sit amet, luctus eu, orci. Phasellus tristique tincidunt arcu. Mauris porttitor nunc ac ligula. Morbi rhoncus dolor sit amet urna. Praesent dapibus tellus in sem. Phasellus elementum placerat orci. Nullam leo. Pellentesque vestibulum.
            Pellentesque eget nunc eget nulla luctus facilisis. Curabitur elit.</textarea>
            <br>min-height, max-height, height, font-size
        </div>
    </div>

</div>
<script type="text/javascript">

$(document).ready(function(){
    var tabs = $('.tabs > li', $('.content'));
    tabs.each(function(){
        var li = $(this);
        var tab = li.attr('tab');

        li.bind('click', function() {
            $('div.examples').hide();
            $('#'+tab).show();
            $('#'+tab).find('textarea').not('.growfieldDummy').growfield('restart');
            $('.tabs li', $('.content')).removeClass('selected');
            li.addClass('selected');
        });
    });

    tabs.eq(0).click();

    $('#growfield').show();
});

</script>

</body>
</html>